<!DOCTYPE html>
<html ng-app="controllers">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	  <script src="js/angular.js"></script>
    <script src="js/angular-resource.js"></script>
    <script src = "js/angular-cookies.js"></script>
    <link rel="stylesheet" href="styles/style.css">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="dist/css/bootstrap.css" rel="stylesheet" />
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="dist/css/bootstrap-theme.css" rel="stylesheet" />
    <link href="dist/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="dist/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="dist/css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="styles/profile.css" rel="stylesheet" />
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="js/script.js"></script>
    <script src="js/controllers.js"></script>
    <script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
    <script src="dist/js/bootstrap.js"></script>
    <title>Quirkl-Your Global TV Channel</title>
  </head>
  <body ng-controller="UserCtrl" ng-init="curUser=$scope.curUser">
    <div class = "container-fluid full-width">
    <div class = "row-fluid">
      <nav class = "navbar navbar-default" role = "navigation">
        <div class = "navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
              <div class = "span1" ng-switch="loggedIn">
				  <a ng-switch-when="true" class = "navbar-brand" href="index.html?;;user={{curUser}}"><img src = "img/logors.png" alt = "idk"/></a>
				  <a ng-switch-when="false" class = "navbar-brand" href="index.html"><img src = "img/logors.png" alt = "idk"/></a>
			  </div>
        </div>
        <div class = "collapse navbar-collapse navbar-ex1-collapse" ng-switch="!!auth.isLogged">
			<div ng-switch-when="true">
			  <ul class = "nav navbar-nav" >
			  	<li><a href="index.html?;;user={{curUser}}">
					<h4>Home</h4></a></li>
				<li><a href="#"><h4>About</h4></a></li>
			  </ul>    
            </div>
			<div ng-switch-when="false">
			  <ul class = "nav navbar-nav" >
			  	<li><a href="index.html">
					<h4>Home</h4></a></li>
				<li><a href="#"><h4>About</h4></a></li>
			  </ul>    
            </div>
		
          <form class="navbar-form navbar-left" role = "search">
          </form>  
          <div ng-switch on = "!!auth.isLogged">
              <div ng-switch-when = 'true'>
                <ul class = "nav navbar-nav navbar-right pull-right">
                	<li><h4 style="padding: 10px; font-color: #000777">"Hi, {{auth.user}}!"</h4></li>
                  <li><a href="#"><img src = "img/mail-icon.png" alt = "who knows"></a></li>
                  <li class = "dropdown">
                    <a href="#" class = "dropdown-toggle" data-toggle = "dropdown"><img src = "img/user.png" alt = "who knows"><b class = "caret"></b></a>
                    <ul class = "dropdown-menu">
                      <li><a href="profile.html?artistID={{curUser}};;user={{curUser}}">My Profile</a></li>
                      <li><a href="#">Settings</a></li>
                      <li><a href="#" ng-click = "logout()">Sign Out</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
              <div ng-switch-when = 'false'>
                <ul class = "nav navbar-nav navbar-right pull-right">
                  <li><a data-toggle = "modal" href = "#signUp"><h4>Sign Up</h4></a></li>
                  <li><a data-toggle = "modal" href = "#login"><h4>Log In</h4></a></li>
              </div>  
        </div> 
      </nav>
    </div>  
    <div class = "row-fluid">
     <div class="span2" style="width: 1000px">
       <div class="art span10" ng-controller = "ProfileCtrl" ng-init="shouldUpload=$scope.shouldUpload">
          <div class="artistInfo" ng-init="artistNum=$scope.artistNum">
       		<img id="profilePic" src="{{artists[artistNum].thumbnail}}"/>
       		<table class="profileDetails">
       		<tbody>
       			<tr>
       				<td id="profileName">{{artists[artistNum].username}}</td>
       			</tr>
       				<tr>
       					<td id="profileHeading"> Headline:</td>
       				</tr>
       				<tr>
       					<td><p>{{artists[artistNum].headline}}</p></td>
       				</tr>
       				<tr>
       					<td id="profileHeading"> Bio:</td>
       				</tr>
       				<tr>
       					<td><p>{{artists[artistNum].bio}}</p></td>
       				</tr>
       		</tbody>
       		</table>
       		<table class="follow" >
				<tbody>
					<tr>
						<td id="followNum">{{artists[artistNum].followers}}</td>
						<td id="followNum">{{artists[artistNum].following}}</td>
						<td ng-show="curUser==artistNum&&auth.isLogged">
							<button type="button" ng-click="shouldUpload = !shouldUpload">Upload Art</button>
						</td>
					</tr>
					<tr>
						<td id="followLabel">Followers</td>
						<td id="followLabel">Following</td>
						<td ng-show="curUser==artistNum&&!!auth.isLogged">
							<button type="button" ng-click="shouldUpdate = !shouldUpdate">Update Profile</button>
						</td>
					</tr>
				</tbody>
			</table>	
		</div>
		<div class="uploadForm" ng-show="shouldUpload">
			<form name="myForm" style="margin: 15px 0px 15px 0px" ng-submit="submit()">
      			<span class="error" ng-show="myForm.input.$error.required">Required!</span></br>
      			<span class="error" ng-show="myForm.input.$error.pattern"></span>
      			Art Title: <input type="text" name="input" ng-model="title" required ng-trim="false" ngMaxlength="15" ng-click="clearClickTitle()"></br>
      			Art Description: <input type="text" name="input" ng-model="description" required ng-trim="false" ngMaxlength="140" ng-click="clearClickDescript()"></br>
      			Select a category: </br>
      			<input type="radio" ng-model="category" value="Film">Film</br>
      			<input type="radio" ng-model="category" value="Music">Music</br>
      			<input type="radio" ng-model="category" value="Performance">Performance</br>
      			<input type="radio" ng-model="category" value="Series">Series</br>
      			<input type="radio" ng-model="category" value="Visual Art">Visual Art</br>
      			Select a subcategory: </br>
      			<input type="radio" ng-model="subcategory" value="Sculpture">Sculpture</br>
      			<input type="radio" ng-model="subcategory" value="Photography">Photograph</br>
      			<input type="radio" ng-model="subcategory" value="Painting">Painting</br>
      			<input type="radio" ng-model="subcategory" value="Horror">Horror</br>
      			<input type="radio" ng-model="subcategory" value="Action">Action</br>
      			<input type="radio" ng-model="subcategory" value="Comedy">Comedy</br>
      			<input type="radio" ng-model="subcategory" value="Romance">Romance</br>
      			<input type="radio" ng-model="subcategory" value="Hip Hop">Hip Hop</br>
      			<input type="radio" ng-model="subcategory" value="Magic">Magic</br>
      			<input type="radio" ng-model="subcategory" value="Play">Play</br>
      			<input type="radio" ng-model="subcategory" value="Visual Art">Visual Art</br>
      			Choose the art you want to upload: </br>
      			<input type="file" ng-model-instant id="fileToUpload" multiple onchange="angular.element(this).scope().setFiles(this)" /></br>
      			<div ng-show="files.length">
        			<div ng-repeat="file in files.slice(0)">
          				<span>{{file.webkitRelativePath || file.name}}</span>
            			(<span ng-switch="file.size > 1024*1024">
                			<span ng-switch-when="true">{{file.size / 1024 / 1024 | number:2}} MB</span>
                			<span ng-switch-default>{{file.size / 1024 | number:2}} kB</span>
            			</span>)
        			</div>
        			<input type="button" ng-click="uploadFile()" value="Upload" />
        			<div ng-show="progressVisible">
            			<div class="percent">{{progress}}%</div>
            			<div class="progress-bar">
                			<div class="uploaded" ng-style="{'width': progress+'%'}"></div>
            			</div>
        			</div>
   				</div>
   				<input type="submit" id="submit" value="Submit" />
   				<!---
      			<pre>new = {{artwork[nextArtID-2]}}{{artwork[nextArtID-1]}}</pre>
      			-->
			</form>
		</div>
		<div class="uploadForm" ng-show="shouldUpdate">
			<form>
				Artist Headline: <input type="text" name="input" value="{{artists[artistNum].headline}}" required ng-trim="false"></br>
				Artist Bio: <input id="bioField" type="text" name="input" value="{{artists[artistNum].bio}}" required ng-trim="false"></br>
				<input type="file" ng-model-instant id="fileToUpload" multiple onchange="angular.element(this).scope().setFiles(this)" /></br>
      			<div ng-show="files.length">
        			<div ng-repeat="file in files.slice(0)">
          				<span>{{file.webkitRelativePath || file.name}}</span>
            			(<span ng-switch="file.size > 1024*1024">
                			<span ng-switch-when="true">{{file.size / 1024 / 1024 | number:2}} MB</span>
                			<span ng-switch-default>{{file.size / 1024 | number:2}} kB</span>
            			</span>)
        			</div>
        			<input type="button" ng-click="updateProfileImg()" value="Replace Profile Image" />
        			<div ng-show="progressVisible">
            			<div class="percent">{{progress}}%</div>
            			<div class="progress-bar">
                			<div class="uploaded" ng-style="{'width': progress+'%'}"></div>
            			</div>
        			</div>
   				</div>
   				<img src="{{artists[artistNum].thumbnail}}"/>
			</form>
		</div>
         <div class = "pThumbnails" ng-init= "length=$scope.artistArtLength" ng-init= "artistArt=$scope.artistArt" ng-switch="!!auth.isLogged">
			<div ng-switch-when="true">
			  <ul class = "thumbnails" >
				<li class = "span2"  ng-repeat="art in artistArt">
				  <a href="Art Page.html?artID={{artwork[art].artID}};category={{artwork[art].category}};user={{curUser}}" ng-click="" class = "thumbnail">
					<img id="pThumbnailPics" src = "{{artwork[art].thumbnail}}">
				  </a>
				  <p>{{artwork[art].title}}</p>
				</li>
			  </ul>
			</div>
			<div ng-switch-when="false">
			  <ul class = "thumbnails" >
				<li class = "span2"  ng-repeat="art in artistArt">
				  <a href="Art Page.html?artID={{artwork[art].artID}};category={{artwork[art].category}}" ng-click="" class = "thumbnail">
					<img id="pThumbnailPics" src = "{{artwork[art].thumbnail}}">
				  </a>
				  <p>{{artwork[art].title}}</p>
				</li>
			  </ul>
			</div>
         </div>
      </div>   
    </div> 
  </div> 
   <div>  
    <div class = "modal fade" id = "signUp" tabindex = "-1" role = "dialog" aria-labelledby="signUpLabel" aria-hidden="true">
      <div class = "modal-dialog">
        <div class = "modal-content">
          <div class = "modal-header">
            <h4 class = "modal-title" id="signUplabel">Sign Up</h4>
          </div>
          <div class = "modal-body">
             <form>
                <label for="username">Username:</label>
                <input type = "text"  name = "username" ng-model = "username" required><br/>
                <label for = "password">Password:</label>
              </form>
          </div>
          <div class = "modal-footer">
            <button type = "button" class = "btn btn-success" ng-click = "submit()" data-dismiss = "modal">Submit</button>
            <button type = "button" class = "btn btn-danger" data-dismiss = "modal">Cancel</button>
          </div>
        </div>
      </div>
    </div> 
    <div class = "modal fade" id = "login" tabindex = "-1" role = "dialog" aria-labelledby="loginLabel" aria-hidden="true">

      <div class = "modal-dialog">
        <div class = "modal-content">
          <div class = "modal-header">
            <h4 class = "modal-title" id="loginlabel">Log In</h4>
          </div>
          <div class = "modal-body">
             <form>
                <label for = "username">Username: {{auth.user}}</label>
                <input type = "text" name = "username"  required><br/>
                <label for = "password">Password:</label>
                <input type = "text" name = "password" required><br/>
             </form>
          </div>
          <div class = "modal-footer">
            <button type = "button" class = "btn btn-success" type = "submit" ng-click="logon(username,password)" data-dismiss = "modal">Submit</button>
            <button type = "button" class = "btn btn-danger" data-dismiss = "modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>   
</body>
</html>